<template>
   <div class="sector">
    <h3>添加车辆</h3>
    <el-form
      :model="changeForm"
      label-width="100px"
      class="demo-changeForm"
    >
      <el-form-item label="车辆型号" prop="model">
        <el-input
          v-model="changeForm.model"
        ></el-input>
      </el-form-item>
      
         <el-form-item label="所属用户" >
<el-input
         v-model="changeForm.userID"
         disabled
        ></el-input>
     
     
      </el-form-item>

      <el-form-item label="车辆号牌" prop="licensePlate">
        <el-input v-model="changeForm.licensePlate"></el-input>
      </el-form-item>

      <el-form-item label="车型" prop="motorcycleType ">
        <el-select v-model="changeForm.motorcycleType" placeholder="请选择车型">
          <el-option label="SUV" value="SUV"></el-option>
          <el-option label="轿车" value="轿车"></el-option>
          <el-option label="MPV" value="MPV"></el-option>
        </el-select>
      </el-form-item>

   

      <el-form-item label="座位" prop="seat">
        <el-select v-model="changeForm.seat" placeholder="请选择座位数">
          <el-option label="2座" value="2"></el-option>
          <el-option label="5座" value="5"></el-option>
          <el-option label="7座" value="7"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="车辆地址" prop="address">
        <el-input v-model="changeForm.address"></el-input>
      </el-form-item>
        <el-form-item label="车辆评分" prop="value">
        <el-rate
  v-model="changeForm.value"
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate>
      </el-form-item>


 </el-form-item>
        <el-form-item label="车辆租金" prop="rent">
        <el-input v-model="changeForm.rent"></el-input>
      </el-form-item>



      <el-form-item>
        <el-button type="primary" @click="change('changeForm')"
          >确认修改</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers("car");
export default {
  data() {
    return {
      changeForm: {
        userID: "",
        value: 0,
        model: "",
        motorcycleType: "",
        licensePlate: "",
        seat: "",
        address: "",
        rent: "",
      },
    };
  },
  created() {
    this.findCarByID(this.$route.query.id);
  },

  methods: {
    ...mapActions(["findCarByID", "changeCar"]),
    change() {
      this.changeCar(this.changeForm);
      this.$router.push("/system/car/carlist");
    },
  },
  computed: {
    ...mapState(["upData"]),
  },
  watch: {
    upData(val) {
      this.changeForm = val;
    },
  },
};
</script>


<style lang="scss" scoped>
.sector {
  width: 98%;
  box-shadow: 0px 2px 4px 0px #2233;
  background-color: #fff;
  margin: 0px auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .demo-upData {
    width: 400px;
  }
  .el-rate {
    height: 40px;
    display: flex;
    align-items: center;
  }
}
</style>